<template>
    <div class="container">
      <div class="container--item">
        <img src="../assets/register/left.png"
             @click="backMall"
             class="container--img__staffService"
             alt="#">
        <div class="container--item__search">
          <img src="../assets/mall/search.png" class="container--img__search" alt="#">
          <input type="text" placeholder="保暖内衣" v-model="searchValue" ref="searchPlaceholder">
        </div>
        <span @click="search">搜索</span>
      </div>
      <div class="container--item__recommend">
        <p>热搜</p>
        <div>
          <span @click="searchProducts(item)"
                v-for="(item, key) in HotSearchProducts" :key="key">{{item}}</span>
        </div>
      </div>
      <div class="container--item__history">
        <p class="container--history__header">
          <span>历史搜索</span>
          <img src="../assets/receivingAddress/delete.png" alt="#" @click="deleteHistory">
        </p>
        <div v-for="(item, key) in HistoricalArr"
             :key="key" @click="Historical(item)">{{item}}</div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'search',
  data() {
    return {
      searchValue: undefined,
      HistoricalArr: [],
      HotSearchProducts: ['保暖内衣', '面膜', '口红', '手表', '保温杯', '洗衣液', '超值大礼包', '华为', '耳机'],
    };
  },
  methods: {
    search() {
      this.HistoricalArr.unshift(this.searchValue);
      this.HistoricalArr = [...new Set(this.HistoricalArr)];
      window.localStorage.setItem('HistoricalArr', this.HistoricalArr);
      this.$router.push({
        name: 'searchCommodity',
        params: { data: this.searchValue || this.$refs.searchPlaceholder.placeholder },
      });
    },
    searchProducts(item) {
      this.HistoricalArr.unshift(item);
      this.HistoricalArr = [...new Set(this.HistoricalArr)];
      window.localStorage.setItem('HistoricalArr', this.HistoricalArr);
      this.$router.push({
        name: 'searchCommodity',
        params: { data: item },
      });
    },
    backMall() {
      this.$router.push({ name: 'shoppingMall' });
    },
    deleteHistory() {
      this.HistoricalArr = [];
      localStorage.removeItem('HistoricalArr');
    },
    Historical(item) {
      this.$router.push({
        name: 'searchCommodity',
        params: { data: item },
      });
    },
  },
  mounted() {
    this.$refs.searchPlaceholder.focus();
  },
  created() {
    if (window.localStorage.getItem('HistoricalArr')) {
      this.HistoricalArr = [...window.localStorage.getItem('HistoricalArr').split(',')];
    }
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.container{
  background-color: #f2f2f2;
  width: 100vw;
  .container--item{
    background-color: #fff;
    width: 100vw;
    position: relative;
    line-height: (86/75) + rem;
    border-bottom: 1px solid #f2f2f2;
    .container--img__staffService{
      width: .5rem;
      height: .5rem;
      vertical-align: middle;
      margin-left: .5rem;
    }
    .container--item__search{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      border-radius: 4px;
      vertical-align: middle;
      height: (72/75) + rem;
      width: 70%;
      background-color: #f5f5f5;
      .container--img__search{
        vertical-align: middle;
        width: .4rem;
        height: .4rem;
        margin-left: 4%;
        margin-bottom: 2%;
      }
      input{
        font-size: .35rem;
        margin-left: .35rem;
        vertical-align: middle;
        position: relative;
        top: -.1rem;
        outline: none;
        border: none;
        height: .8rem;
        width: 5.9rem;
        background-color: #f5f5f5;
      }
    }
    span{
      font-size: .35rem;
      position: absolute;
      right: .4rem;
      color: #afafaf;
    }
  }
  .container--item__recommend{
    background-color: #fff;
    margin-bottom: (15/75) + rem;
    p{
      font-size: .4rem;
      margin-left: .35rem;
    }
    div{
      span{
        margin-top: .25rem;
        margin-bottom: .25rem;
        display: inline-block;
        margin-left: .35rem;
        font-size: .35rem;
        color: #575757;
        padding: .3rem;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
    }
  }
  .container--item__history{
    background-color: #fff;
    width: 100vw;
    div{
      width: 100vw;
      line-height: 1.2rem;
      font-size: .35rem;
      padding-left: .35rem;
    }
    div:active{
      background: #eeeeee;
    }
    .container--history__header{
      position: relative;
      line-height: 1.2rem;
      width: 100vw;
      span{
        display: inline-block;
        font-size: .4rem;
        margin-left: .35rem;
      }
      img{
        position: absolute;
        right: .35rem;
        top: .35rem;
        display: block;
        margin: auto 0;
        width: .5rem;
        height: .5rem;
      }
    }
  }
}
</style>
